import { memo, useState } from "react";
import { MyButton, MyInput } from "../../../../components";
import MyDialog from "../../../../components/MyDialog";
import { message, Radio, type CheckboxProps } from "antd";
import classNames from "classnames";
import http from "../../../../utils/http";
import api from "../../../../api";
import { useAppSelector } from "../../../../utils/storeHook/storeHook";
import './index.scss'


type propsT = {
    visible:boolean,
    onClose:()=>void,
    onRefresh:Function
}
type formT = {
    name:string,
    type:string,
    descripe:string,
}

const CreateChannel = memo(({visible,onClose,onRefresh}:propsT)=>{
    const [messageApi, contextHolder] = message.useMessage();
    const [createChannelForm, setCreateChannelForm] = useState<formT>({
        name:'',
        type:'text',
        descripe:'',
    })
    const actServerId = useAppSelector((state)=>state.channel.actServerId)
    const onChangeCheck: CheckboxProps['onChange'] = (e) => {
        setCreateChannelForm({
            ...createChannelForm,
            type:e.target.value
        })
    };

    const onChangeInput = (value:string,id:string)=>{
        setCreateChannelForm({
            ...createChannelForm,
            [id]:value
        })
    }

    function handleCreateChannel(){
        for(let key in createChannelForm){
            const formKey = key as keyof formT
            if(createChannelForm[formKey] == ''){
                messageApi.open({
                    type: 'error',
                    content: `请输入频道名称`+formKey,
                });
                return
            }
        }
        http.post(api.server.createChannel,{...createChannelForm,server_id:actServerId}).then(()=>{
            onRefresh()
            onClose()
            messageApi.open({
                type: 'success',
                content: `创建成功`,
            });
            setCreateChannelForm({
                name:'',
                type:'text',
                descripe:'',
            })
        }).catch(err=>{
            messageApi.open({
                type: 'error',
                content: err.message,
            });
        })
        
    }
    return <>
        {contextHolder}
        <MyDialog visible={visible} title='添加新频道' onClose={onClose}>

            <div className="channel_addChannel">
                <div className="channel_addChannel_form">
                    <div className="channel_addChannel_item">
                        <label className="channel_addChannel_item_label">频道类型</label>
                        <div className="channel_addChannel_item_input input_flex">
                            <Radio.Group block defaultValue="text" size="large" onChange={onChangeCheck} className="channel_addChannel_check_box">
                                <Radio.Button 
                                    value="text" 
                                    className={
                                        classNames(
                                            'channel_addChannel_checkBtn',
                                            {'channel_addChannel_checkBtn_act':createChannelForm.type == 'text'}
                                        )
                                    }
                                >
                                    文字频道
                                </Radio.Button>
                                <Radio.Button 
                                    value="voice" 
                                    className={
                                        classNames(
                                            'channel_addChannel_checkBtn',
                                            {'channel_addChannel_checkBtn_act':createChannelForm.type == 'voice'}
                                        )
                                    }
                                >
                                    语音频道
                                </Radio.Button>
                            </Radio.Group>
                        </div>
                    </div>
                    <div className="channel_addChannel_item">
                        <label htmlFor="name" className="channel_addChannel_item_label">频道名称</label>
                        <div className="channel_addChannel_item_input">
                            <MyInput 
                                onChange={onChangeInput} 
                                id="name" 
                                placeholder="输入频道名称"
                            />
                        </div>
                    </div>
                    <div className="channel_addChannel_item">
                        <label htmlFor="descripe" className="channel_addChannel_item_label">频道说明</label>
                        <div className="channel_addChannel_item_input">
                            <MyInput 
                                type="textarea" 
                                onChange={onChangeInput} 
                                resize={"none"} 
                                id="descripe" 
                                placeholder="输入频道说明"
                                rows={3}
                            />
                        </div>
                    </div>
                </div>
                <div className="channel_addChannel_formbtn">
                    <MyButton type="guest" onClick={onClose}>取消</MyButton>
                    <MyButton type="primary" onClick={handleCreateChannel}>创建频道</MyButton>
                </div>
            </div>
        </MyDialog>
    </>
})

export default CreateChannel;